<template>
	<view>
		<!-- 列表页 -->
		<view class="banner">
			<image src="/static/assets/s01.png" mode="widthFix"></image>
			<view class="title">艺奇国际美育中心场地主题派对</view>
		</view>
		<view class="DateButton">
			<view>
				<picker mode="date" :start="startTime" :value="dateTime[0]+'-'+dateTime[1]+'-'+dateTime[2]" @change="bindDateChange">
				{{dateTime[0]+'年'+dateTime[1]+'月'+dateTime[2]+'日'}}
				</picker>
			</view>
			<view>
				<picker @change="chooseMorningOrAfter" :value="morningOrAfter" :range="array">
					{{array[morningOrAfter]?array[morningOrAfter]:"上/下午"}}
				</picker>
			</view>
		</view>
		<view class="main">
			<view v-if="imgArr.length>0" :class="{'active':chooseIndex==index}" v-for="(item,index) in imgArr" :key="index" @click="chooseProduct(index)">
				<view class="left">
					<view class="name">{{item.cate_name}}</view>
					<view class="keyword">{{item.title}}</view>
					<view class="address">{{item.province.name}} {{item.city.name}} {{item.area.name}} {{item.address}}</view>
				</view>
				<view class="right">
					<image lazy-load :src="item.cate_logo" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<button @click="goto" class="btn-primary btn-foot">去预约</button>
		<select-pro ref="selectPro" @changeDate="bindDateChange" @chooseMornOrAfter="chooseMorningOrAfter" @showOrHide="showOrHide" :showModel="showModel" :activeName="chooseIndex>-1?imgArr[chooseIndex].cate_name:''" :proId="chooseIndex>-1?imgArr[chooseIndex].id:''"></select-pro>
	</view>
</template>

<script>
	import {getProductList} from '@/service/common';
	import {format} from '@/utils/getTime.js';
	import selectPro from '@/components/selectPro/selectPro.vue';
	export default {
		name: "Select",
		components: {
			selectPro
		},
		data() {
			return {
				imgArr: [], // 列表数据
				chooseIndex: -1, // 当前点击的列表数据下标
				startTime: '', //当天日期 格式 yyyy年MM月dd日
				dateTime: [], //当前选择日期 格式[年，月，日]
				array: ["上午", "下午"],
				morningOrAfter: -1 ,//早上 0 下午 1
				showModel:false
			}
		},
		onLoad() {
			this.getData()
			let day = new Date();
			day.setTime(day.getTime() + 24 * 60 * 60 * 1000);
			this.startTime = format("yyyy-MM-dd", day)
			this.dateTime = format("yyyy-MM-dd", day).split('-')
			// this.array = this.$refs.selectPro.array
		},
		methods: {
			getData() { // 获取页面数据
				getProductList().then(res => {
					this.imgArr = res.data.categories
				})
			},
			showOrHide(){ // 显示隐藏预约
				this.showModel=!this.showModel
			},
			chooseMorningOrAfter(e) {// 页面上午或下午选择
				this.morningOrAfter = e.detail.value
				this.$refs.selectPro.morningOrAfter = e.detail.value
			},
			
			bindDateChange(e) { //  接收时间
				this.dateTime = e.detail.value.split('-')
				this.$refs.selectPro.dateTime = e.detail.value.split('-')
			},
			chooseProduct(e) { // 选择商品
				this.chooseIndex = this.chooseIndex != e ? e : -1;
			},
			goto() { // 点击预约
				if(this.chooseIndex<0){
					uni.showToast({title:'请选择您要预约的套餐',icon:'none'})
				}else{
					this.$refs.selectPro._getPrice()
					this.showOrHide()
				}
			}
		}
	}
</script>

<style>
	.banner {
		width: 750rpx;
		height: 240rpx;
		position: relative;
	}

	.banner>image {
		width: 100%;
	}

	.title {
		display: flex;
		align-items: center;
		align-content: center;
		width: 400rpx;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		height: 240rpx;
		font-size: 40rpx;
		color: #fff;
	}

	.DateButton {
		margin-top: 10rpx;
		display: flex;
		/* justify-content: space-around; */
		justify-content: space-between;
		width: 750rpx;
		background-color: #fff;
		color: rgba(200, 155, 78, 1);
		font-size: 28px;
		padding: 17rpx 0 21rpx 0;
		text-align: center;
	}
	.DateButton>view{
		width:40%;
		padding-left: 10%;
	}
	.DateButton>view:last-child{
		padding-right: 10%;
	}
	.DateButton>view:first-child picker{
		float: left;
	}
	.DateButton>view:last-child picker{
		float: right;
	}
	/* .DateButton>view:last-child picker{
		float: right;
	} */
	.DateButton>view picker {
		
			display: inline-block;
			padding: 2rpx 12rpx;
			border-radius: 40px;
			border: 1px solid rgba(200, 155, 78, 1);
	}

	/* .DateButton>view view {
		display: inline-block;
		padding: 2px 12px;
		border-radius: 40px;
		border: 1px solid rgba(200, 155, 78, 1);
	} */
	.main {
	  width: 100%;
	  margin: 40rpx 20rpx 90rpx;
	}
	
	.main>view {
	  width: 702rpx;
	  height: 232rpx;
	  background-color: #fff;
	  display: flex;
	  margin-bottom: 20rpx;
	  justify-content: space-between;
	  align-items: center;
	  border: 4rpx solid transparent;
	}
	
	.mainDetail {
	  width: 710rpx;
	  height: 260rpx;
	  margin: 20rpx auto;
	  background: #fff;
	}
	
	.main>view.active {
	  border: 4rpx solid #c89b4e;
	}
	
	.left {
	  margin-left: 26rpx;
	  max-width: 404rpx;
	}
	
	.right {
	  margin-right: 12rpx;
	}
	
	.name {
	  font-size: 44rpx;
	  color: rgb(77, 58, 58);
	}
	
	.keyword {
	  font-size: 32rpx;
	  color: #666;
	  width: 404rpx;
	  height: 44rpx;
	  margin: 10rpx 0 24rpx 0;
	  padding-bottom: 26rpx;
	  border-bottom: 2rpx solid #dfdfdf;
	}
	
	.address {
	  font-size: 20rpx;
	  color: rgba(153, 153, 153, 1);
	}
	
	.right image {
	  width: 218rpx;
	  height: 218rpx;
	}
	/* #ifdef H5 */
	  .btn-foot{
	   bottom: -35rpx;
	  }
	 /* #endif */
</style>
